
<template>
    <div class="rightbody">
        <div class="tabheader2">
			<ul>
				<li :class="{'active':nav_top_btn == 0}" @click="checkNva(0)">表单</li>
				<li :class="{'active':nav_top_btn == 1}" @click="checkNva(1)">动画</li>
			</ul>
		</div>

        <div class="formtab1"  v-show="nav_top_btn == 0">
			<ul>
				<li>
					<div class="textblock">
						<label>按钮名称</label>
						<Input v-model="btnName" placeholder="请输入..." style="width: 210px;" @on-change="btnNameChange"></Input>
					</div>
				</li>
				<li>
					<div class="textblock">
						<label>提示信息</label>
						<Input v-model="phoneNumber" placeholder="请输入..." style="width: 210px;" @on-change="phoneNumberChange"></Input>
					</div>
				</li>

				<li>
					<div class="subtabheader">
						<ul>
							<li @click="isTextOrBgColor=1,BgColorListIndex=-99" :class="{active:isTextOrBgColor==1}">文字</li>
							<li @click="isTextOrBgColor=2,BgColorListIndex=-99" :class="{active:isTextOrBgColor==2}">背景</li>
						</ul>
					</div>
					<div class="colortab">
						<template v-for="(item,index) in BgColorList" >
							<a :style="setAstyle(index)" @click="changeColor(index)" :class="{'active':BgColorListIndex == index}"></a>
						</template>
						<a class="nocolor" @click="changeColor2" :class="{'active':BgColorListIndex == -2}"></a>
						<a class="colorpicker" @click="changeColor3" :class="{'active':BgColorListIndex == -3}"></a>
					</div>
				</li>

				<li>
					<div class="slideblock">
						<label>透明</label>
						<Slider :max="100" :min="0" @on-input="OpacityChange" v-model="opacity" show-input style="float: left;width: 230px;" :tip-format="hideFormat" ></Slider>
					</div>
				</li>
				<li>
					<div class="slideblock">
						<label>旋转</label>
						<Slider :max="360" :min="0" v-model="rotateDeg" @on-input="rotateDegChange" show-input style="float:left;width: 230px;" :tip-format="hideFormat"></Slider>
					</div>
				</li>
				<li>
					<div class="numberblock">
						<label>大小</label>
						<div class="inputwidth">
							<span>宽</span>
							<Input-number :max="10" :min="1" v-model="value1" style="width:80px;margin-right:20px;"></Input-number>
						</div>
						<div class="inputheight">
							<span>高</span>
							<Input-number :max="10" :min="1" v-model="value1" style="width:80px;"></Input-number>
						</div>
					</div>
				</li>
			</ul>
			<Collapse v-if="userInfo.is_designer==1">
				<Panel name="1">&nbsp;&nbsp;边框样式
					<div class="collapse" slot="content">
						<div class="item">
							<label>样式</label>
							<Select v-model="borderStyle" style="width:225px" @on-change="borderStyleChange">
								<Option v-for="item in options3" :value="item.value" :key="item">{{ item.label }}</Option>
							</Select>
						</div>
						<div class="item clearfix">
							<label>颜色</label>
							<div class="colortab2 clearfix">
								<!-- <a style="background:#1abd9b" :class="{'active':borderListIndex == -2}" @click="changeBorderColor1('#1abd9b')"></a> -->
								<template v-for="(item,index) in borderColorList" >

									<a :style="setAstyle(index)" @click="changeBorderColor(index)" :class="{'active':borderListIndex == index}"></a>
								</template>
								<a class="nocolor" :class="{'active':borderListIndex == -2}" @click="changeBorderColor2"></a>
								<a class="colorpicker" :class="{'active':borderListIndex == -3}" @click="changeBorderColor3"></a>
							</div>
						</div>
						<div class="item">
							<div class="slideblock">
								<label>粗细</label>
								<Slider :max="20" v-model="borderWidth" @on-input="borderWidthChange" style="float:left;width:230px;" :tip-format="hideFormat" show-input></Slider>
							</div>
						</div>
						<div class="item">
							<div class="slideblock">
								<label>圆角</label>
								<Slider v-model="borderRadius" style="float:left;width:230px;" :tip-format="hideFormat" @on-input="borderRadiusChange" show-input></Slider>
							</div>
						</div>
					</div>
				</Panel>
			</Collapse>
        </div>
    </div>
</template>


<script>
	import { mapActions, mapGetters } from 'vuex'
	export default {
		name: "formbuttonfunc",
        computed: {
		      ...mapGetters([
		        "checkedItemData",
		        "rightTabIndex",
            "userInfo"

		      ]),
		    },
		data() {

			return {
				nav_top_btn: 0,
				btnName:"",
				phoneNumber,
			}

		},
		mounted(){

		      // console.log(this.checkedItemData)
		      this.givedata(this.checkedItemData);

		},
		methods: {
            givedata(data){
            	this.btnName = data.content;
            	this.phoneNumber = data.in.properties.url;

        		this.BgColorListIndex = -99;
        		this.placeholder = data.in.properties.placeholder;
        		this.require1 = data.in.properties.require;
        		this.inputType = data.inputType;
        		this.opacity = 100- data.out.css.opacity * 100;
        		this.rotateDeg = typeof(data.out.css.transform) == "undefined" ?  0 : parseInt(data.out.css.transform.match(/\d+(\.\d+)?/g)[0]);
                this.widthValue = typeof(data.in.css.width) == "undefined" ?  0 : parseInt(data.in.css.width);
                this.heightValue = typeof(data.in.css.height) == "undefined" ?  0 : parseInt(data.in.css.height);
                this.borderStyle = typeof(data.in.css.borderStyle) == "undefined" ? "none" : data.in.css.borderStyle;
                this.borderWidth = typeof(data.in.css.borderWidth) == "undefined" ?  0 : parseInt(data.in.css.borderWidth.replace("px",""));
                this.borderRadius = typeof(data.in.css.borderRadius) == "undefined" ?  0 : parseInt(data.in.css.borderRadius.replace("px",""));

                this.anim = JSON.stringify(data.anim);



                this.btnTip = data.in.properties.ok;

        	},
			checkNva(index) {
				switch(index) {
					case 0:
						this.nav_top_btn = 0
						break;
					case 1:
						this.nav_top_btn = 1
						break;
				}
			},
			btnNameChange(){


			},
			phoneNumberChange(){


			},

		}

	}
</script>


<style type="text/javascript">
.formtab1>ul>li{width: 280px;margin: 15px auto;}
.textblock label{float: left;width: 70px; height: 32px;line-height: 32px;font-size: 14px;text-indent: 5px;}
</style>
